<template>
  <div>
    <return-bar name="挂号历史"></return-bar>
    <el-scrollbar :height="height" style="margin-top: 10px">
      <div
        v-for="(item, index) in registrationList"
        :key="index"
        class="scrollbar-demo-item"
        @click="toRegistrationDetails(item)"
      >
        <div class="content">
          <div>{{ item.hospitalName }} - {{ item.sectionName }}</div>
          <div>
            {{ item.date }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import ReturnBar from "@/components/ReturnBar.vue";
import { history } from "@/api/registration";

export default {
  components: { ReturnBar },
  name: "",
  data() {
    return {
      registrationList: [],
    };
  },
  methods: {
    doHistory() {
      history({
        page: 0,
        pageSize: 1000,
      }).then((res) => {
        console.log(res.data)
        this.registrationList = res.data.list;
      });
    },
    toRegistrationDetails(value) {
      this.$router.push({
        name: "RegistrationDetails",
        query: {
          registrationId: value.registrationId
        },
      });
    },
  },
  created() {
    this.doHistory()
  }
};
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  /* margin-top: 10px; */
  text-align: center;
  border-radius: 4px;
  border-bottom: 1px #80a492 solid;
  background: #ffffff;
  color: #80a492;
}

.content {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
}
</style>